import { memo, useEffect, useRef } from 'react'
import { Card, Space, Tag, Typography, List } from 'antd'
import { SyncOutlined, UsbOutlined, RadarChartOutlined, ApiOutlined } from '@ant-design/icons'

const { Title, Text } = Typography

const DefaultProps = {
  name: '',
  healthSpec: {}
}
function InterfacesList(props = DefaultProps) {
  const { name, healthSpec } = props

  return (
    <Card type="inner" title={name}>
      <Card style={{ marginBottom: 16 }}>
        <List>
          <List.Item>
            <Space className="w-full flex justify-between">
              <Text>CPU 占用率</Text>
              <Tag icon={<SyncOutlined spin />} color="blue">
                {healthSpec.cpu}
              </Tag>
            </Space>
          </List.Item>
          <List.Item>
            <Space className="w-full flex justify-between">
              <Text>内存占用率</Text>
              <Tag icon={<SyncOutlined spin />} color="blue">
                {healthSpec.memory}
              </Tag>
            </Space>
          </List.Item>
          <List.Item>
            <Space className="w-full flex justify-between">
              <Text>FPGA 访问</Text>
              <Tag icon={<SyncOutlined spin />} color="blue">
                {healthSpec.fpga}
              </Tag>
            </Space>
          </List.Item>
          <List.Item>
            <Space className="w-full flex justify-between">
              <Text>NVRAM 读写</Text>
              <Tag icon={<SyncOutlined spin />} color="blue">
                {healthSpec.nvram}
              </Tag>
            </Space>
          </List.Item>
          <List.Item>
            <Space className="w-full flex justify-between">
              <Text>板间同步</Text>
              <Tag icon={<SyncOutlined spin />} color="blue">
                {healthSpec.sync}
              </Tag>
            </Space>
          </List.Item>
        </List>
      </Card>
    </Card>
  )
}

export default memo(InterfacesList)
